<template>
    <slot></slot>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 200px"
        label-position="top">
        <el-form-item :label="item.name" v-for="(item, index) in formData" :key="index"
            :prop="String(item.game_field_id)">
            <template v-if="item.type === 'cascade'">
                <el-cascader v-model="form[item.game_field_id]" :options="item.option" :placeholder="item.placeholder"
                    clearable />
            </template>
            <template v-else-if="item.type === 'select'">
                <el-select v-model="form[item.game_field_id]" :placeholder="item.placeholder || '请输入'">
                    <el-option :label="seleItem" :value="seleItem" v-for="(seleItem, seleIndex) in item.option"
                        :key="seleIndex" />
                </el-select>
            </template>
            <template v-else-if="item.type === 'input'">
                <el-input v-model="form[item.game_field_id]" :placeholder="item.placeholder || '请输入'" />
            </template>
        </el-form-item>
    </el-form>
    <!-- <el-button type="primary" @click="onSubmit" size="large">提交</el-button> -->

</template>

<script setup>
import { defineProps, ref } from "vue";

defineProps({
    formData: {
        type: Array,
        default() {
            return [];
        },
    },
    rules: {
        type: Object,
        default() {
            return {};
        },
    },
});
const form = ref({
    5: [], // 服务器 5 realm
    6: [], // 阵营/种族 6 faction_races
    7: [], // 职业/主专精 7 classes_spec
    8: '', // 装备等级 8 equipment_level
    144: '' // 是否在转服CD 144 transfer_cooldown
})
const formRef = ref(null);
const formValid = () => {
    return new Promise((resolve) => {
        formRef.value.validate((valid) => {
            resolve(valid);
        });
    });
}
defineExpose({ formValid, form })
</script>

<!-- <script setup>
import { onMounted, ref } from "vue";
import axios from 'axios';
import { setChilren } from '@/utils/setChildren'

const form = ref({
    5: [], // 服务器 5 realm
    6: [], // 阵营/种族 6 faction_races
    7: [], // 职业/主专精 7 classes_spec
    8: '', // 装备等级 8 equipment_level
    144: '' // 是否在转服CD 144 transfer_cooldown
})
const formData = ref({})
const rules = ref(null)

const formRef = ref(null);


const onSubmit = () => {
    console.log('submit!')
    formRef.value.validate((valid) => {
        console.log(valid);
        if (valid) {
            console.log('submit!');
        } else {
            console.log('error submit!!');
            return false;
        }
    });
}

// 加载JSON数据
onMounted(async () => {
    try {
        const response = await axios.get('/api/form/53da6912.json'); // 跨域代理
        const data = response.data.role
        const newData = setChilren(data)

        rules.value = newData.reduce((acc, item) => {
            if (item.validate) {
                acc[item.game_field_id] = item.validate;
                acc[item.game_field_id].message = item.validate.errorMessage || '请选择参数';
            }
            return acc;
        }, {})
        formData.value = newData

    } catch (error) {
        console.error(error);
    }
});

</script> -->
